<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="账号：">
            <el-input :disabled="disabled" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input :disabled="disabled" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="类型：">
            <el-radio-group :disabled="stateDis" v-model="form.state">
              <el-radio :label="2">品牌方</el-radio>
              <el-radio :label="3">设计师</el-radio>
              <el-radio :label="4">渠道</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手续费：">
            <el-input-number v-model="form.than" :precision="2" :step="0.1" :min="0" :max="1"></el-input-number>
          </el-form-item>
          <el-form-item label="保证金" v-if="url">
            <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList"></el-image>
          </el-form-item>
          <el-form-item>
            <el-button v-if="stateDis" type="primary" @click="submitForm" :loading="loading">提交</el-button>
            <el-button v-else type="primary" @click="recovery" :loading="loading">恢复</el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      form: {
        username: null,
        password: null,
        state: 2, //2 品牌方 3 设计师 4 渠道
        than: 0.06,
        id: null,
      },
      url: null,
      srcList: [],
      disabled: false,
      stateDis:false,
      loading: false,
    };
  },
  created() {},
  activated() {
    this.form.id = this.$route.params.id != "none" ? this.$route.params.id : "";
    if (this.form.id) {
      this.disabled = true;
      this.stateDis = true;
      this.getDetail();
    } else {
      this.disabled = false;
      this.stateDis = false;
      this.form = {
        username: null,
        password: null,
        state: 2, //2 品牌方 3 设计师 4 渠道
        than: 0.06,
        id: null,
      };
      this.url=null
    }
  },
  mounted() {},
  computed: {
    submitUrl() {
      return this.$route.params.id == "none"
        ? "/v1/login/show"
        : "/v1/account/than";
    },
  },
  methods: {
    //恢复账号
    async recovery() {
        console.log(this.form.state > 1 && this.form.state < 5)
        if (this.form.state < 2 || this.form.state > 4) {
            this.$message({
                message: "账号类型不正确",
                type: "warning",
            });
        } else {
            let {data: { code, data }} = await this.$axios({
                url: this.$api + "v1/channel/recovery",
                method: "POST",
                data: {
                    state: this.form.state,
                    id: this.form.id,
                },
            });
            if (code == 0) {
                this.$message({
                    message: data,
                    type: "success",
                });
                setTimeout(() => {
                    this.$router.push("/number");
                }, 1500);
            }
            console.log("添加账号res---------", data);
        }
    },
    //提交
    async submitForm() {
      if (!this.form.username) {
        this.$message({
          message: "账号格式不正确",
          type: "warning",
        });
      } else if (!this.form.password) {
        this.$message({
          message: "密码格式不正确",
          type: "warning",
        });
      } else if (!this.form.than) {
        this.$message({
          message: "手续费格式不正确",
          type: "warning",
        });
      } else {
        this.loading = true;
        let data = await this.$axios({
          url: this.$api + this.submitUrl,
          method: "POST",
          data: {
            username: this.form.username,
            password: this.form.password,
            state: this.form.state,
            than: this.form.than,
            id: this.form.id,
          },
        });
        console.log("添加账号res---------", data);
        this.loading = false;
        if (data.data.code == 0) {
          this.$message({
            message: data.data.data,
            type: "success",
          });
          setTimeout(() => {
            this.$router.push("/number");
          }, 1500);
        }
      }
    },
    async getDetail() {
      let {
        data: { code, data },
      } = await this.$axios({
        url: this.$api + "/v1/account/detailed",
        method: "POST",
        data: {
          id: this.form.id,
        },
      });
      console.log("获取详情------", data);
      if (code == 0) {
        this.form.username = data.username;
        this.form.state = parseInt(data.state);
        this.form.than = data.than;
        this.form.password = "******";
        if (data.state == 5) {
            this.stateDis = false
        }
      }
      this.url = data.url;
      this.srcList = [data.url];
    },
  },
};
</script>